<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Products | FreshMart</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- ── Header ── -->
  <header>
    <div class="logo">
      <img src="images/logo.jpg" alt="FreshMart logo">
    </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="products.html" class="active">Products</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="cart.html">Cart</a></li>
      </ul>
    </nav>
  </header>

  <!-- ── 顶幅横幅 ── -->
  <section class="banner">
    <img src="images/logo.jpg" alt="FreshMart variety banner">
    <div class="banner-text">
      <h1>All Products</h1>
      <p>Fresh food &amp; daily essentials in one place</p>
    </div>
  </section>

  <main>

    <!-- ── Fruits ── -->
    <section class="highlights">
      <h2>Fruits</h2>
      <div class="product-grid">
        <div class="product-card">
          <img src="images/Orange.jpg" alt="Orange">
          <h3>Orange</h3>
          <p>€4.99&nbsp;/&nbsp;kg</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Orange')">-</button>
            <input type="number" id="Orange-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Orange')">+</button>
          </div>
          <button onclick="addToCart('Orange', 4.99)">Add to Cart</button>
        </div>
        <div class="product-card">
          <img src="images/Grape.jpg" alt="Grape">
          <h3>Grape</h3>
          <p>€8.99&nbsp;/&nbsp;kg</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Grape')">-</button>
            <input type="number" id="Grape-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Grape')">+</button>
          </div>
          <button onclick="addToCart('Grape', 8.99)">Add to Cart</button>
        </div>
        <div class="product-card">
          <img src="images/Watermelon.jpg" alt="Watermelon">
          <h3>Watermelon</h3>
          <p>€5.99&nbsp;/&nbsp;kg</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Watermelon')">-</button>
            <input type="number" id="Watermelon-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Watermelon')">+</button>
          </div>
          <button onclick="addToCart('Watermelon', 5.99)">Add to Cart</button>
        </div>
      </div>
    </section>

    <!-- ── Vegetables ── -->
    <section class="highlights">
      <h2>Vegetables</h2>
      <div class="product-grid">
        <div class="product-card">
          <img src="images/Chinese flowering cabbage.jpg" alt="Chinese flowering cabbage">
          <h3>Chinese Flowering Cabbage</h3>
          <p>€2.99&nbsp;/&nbsp;kg</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Chinese_Flowering_Cabbage')">-</button>
            <input type="number" id="Chinese_Flowering_Cabbage-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Chinese_Flowering_Cabbage')">+</button>
          </div>
          <button onclick="addToCart('Chinese_Flowering_Cabbage', 2.99)">Add to Cart</button>
        </div>
        <div class="product-card">
          <img src="images/Chinese cabbage.jpg" alt="Chinese cabbage">
          <h3>Chinese Cabbage</h3>
          <p>€3.99&nbsp;/&nbsp;piece</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Chinese_Cabbage')">-</button>
            <input type="number" id="Chinese_Cabbage-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Chinese_Cabbage')">+</button>
          </div>
          <button onclick="addToCart('Chinese_Cabbage', 3.99)">Add to Cart</button>
        </div>
        <div class="product-card">
          <img src="images/Lettuce.jpg" alt="Lettuce">
          <h3>Lettuce</h3>
          <p>€0.99&nbsp;/&nbsp;piece</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Lettuce')">-</button>
            <input type="number" id="Lettuce-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Lettuce')">+</button>
          </div>
          <button onclick="addToCart('Lettuce', 0.99)">Add to Cart</button>
        </div>
      </div>
    </section>

    <!-- ── Meat ── -->
    <section class="highlights">
      <h2>Meat</h2>
      <div class="product-grid">
        <div class="product-card">
          <img src="images/Pork.jpg" alt="Pork">
          <h3>Pork</h3>
          <p>€8.99&nbsp;/&nbsp;kg</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Pork')">-</button>
            <input type="number" id="Pork-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Pork')">+</button>
          </div>
          <button onclick="addToCart('Pork', 8.99)">Add to Cart</button>
        </div>
        <div class="product-card">
          <img src="images/Beef.jpg" alt="Beef">
          <h3>Beef</h3>
          <p>€10.99&nbsp;/&nbsp;kg</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Beef')">-</button>
            <input type="number" id="Beef-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Beef')">+</button>
          </div>
          <button onclick="addToCart('Beef', 10.99)">Add to Cart</button>
        </div>
        <div class="product-card">
          <img src="images/Chicken.jpg" alt="Chicken">
          <h3>Chicken</h3>
          <p>€8.99&nbsp;/&nbsp;kg</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Chicken')">-</button>
            <input type="number" id="Chicken-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Chicken')">+</button>
          </div>
          <button onclick="addToCart('Chicken', 8.99)">Add to Cart</button>
        </div>
      </div>
    </section>

    <!-- ── Daily Necessities ── -->
    <section class="highlights">
      <h2>Daily Necessities</h2>
      <div class="product-grid">
        <div class="product-card">
          <img src="images/Laundry Detergent.jpg" alt="Laundry Detergent">
          <h3>Laundry Detergent</h3>
          <p>€8.99&nbsp;/&nbsp;piece</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Laundry_Detergent')">-</button>
            <input type="number" id="Laundry_Detergent-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Laundry_Detergent')">+</button>
          </div>
          <button onclick="addToCart('Laundry_Detergent', 8.99)">Add to Cart</button>
        </div>
        <div class="product-card">
          <img src="images/Tissue.jpg" alt="Tissue">
          <h3>Tissue</h3>
          <p>€2.99&nbsp;/&nbsp;piece</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Tissue')">-</button>
            <input type="number" id="Tissue-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Tissue')">+</button>
          </div>
          <button onclick="addToCart('Tissue', 2.99)">Add to Cart</button>
        </div>
        <div class="product-card">
          <img src="images/Shower gel.jpg" alt="Shower gel">
          <h3>Shower Gel</h3>
          <p>€4.99&nbsp;/&nbsp;piece</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Shower_Gel')">-</button>
            <input type="number" id="Shower_Gel-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Shower_Gel')">+</button>
          </div>
          <button onclick="addToCart('Shower_Gel', 4.99)">Add to Cart</button>
        </div>
        <div class="product-card">
          <img src="images/Shampoo.jpg" alt="Shampoo">
          <h3>Shampoo</h3>
          <p>€4.99&nbsp;/&nbsp;piece</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="decreaseQuantity('Shampoo')">-</button>
            <input type="number" id="Shampoo-quantity" value="1" min="1" readonly>
            <button class="quantity-btn" onclick="increaseQuantity('Shampoo')">+</button>
          </div>
          <button onclick="addToCart('Shampoo', 4.99)">Add to Cart</button>
        </div>
      </div>
    </section>

  </main>

  <footer>
    <p>&copy; 2025 FreshMart | <a href="about.html">About Us</a></p>
  </footer>

  <script src="js/script.js"></script>
</body>
</html>
